<template>
    <div class="total-class">
      <div>
        <span class="demonstration">CCNU Online Judge </span>
      </div>
      <div class="block">

        <el-carousel height="50vh">
          <el-carousel-item v-for="item in lunbos" :key="item">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.url"
              :fit="fit">
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
</template>

<script>
  import Api from '../common/api';
    export default {
      name: "first-index",
      data(){
          return{
            lunbos:[]
          }
      },
      beforeRouteEnter(to, from, next) {
        next(vm => {
          // console.log(vm);//当前组件的实例
          Api.apiCall('GET','/get_lunbo').then(resolve=>{
            if (resolve.data.code === 200){
              vm.lunbos = resolve.data.data;
            }
            setTimeout(()=>{
              this.$router.push('/login')
            },3000);
          });
        });
      },
    }
</script>

<style scoped>

  .block{
    margin-top: 3vh;
    width: 70vw;
    margin-left: 15vw;
  }
  .total-class{
    margin-top: 5vh;
    font-size: 3vw;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
